<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>我的声音</title>
        <link rel="stylesheet" href="./Public/frozenui/css/frozen.css">
        <script src="./Public/frozenui/js/lib/zeptojs/zepto.min.js"></script>
        <script src="./Public/frozenui/js/frozen.js"></script>
        <script src="./Public/wxmenu.js"></script>
        <script src="./Public/jquery.min.js"></script>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
        <link rel="stylesheet" href="./Public/global.css">
        <style>
            label{color: #ff90b7;}
            .bgw{ background-color: #FFFFFF;}
            .clean {clear: both;height: 0px;}
             body{font-family:"Microsoft YaHei",微软雅黑; font-size: 14px; color: #333; padding: 0px; margin: 0px;}
            .clause{ font-size: 14px; color: #333; line-height: 22px; background-color: #ffffff; padding: 10px;}
            .ui-form-item{ font-size: 14px !important; line-height: 32px; }
            .ly_button{ background-color: #fec93b; font-size: 15px; color: #000;  text-align: center; padding: 12px 10px; width: 100%; } 
            .mic_star{ margin-left: 40%;  float: left; width: 80px ; height: 80px; border: 2px solid #fec93b; border-radius: 80px; }
            .mic_star2{ width: 35px ; height: 35px; border: 2px solid #fec93b; border-radius: 35px; margin: 21px auto 0px auto;}
            .mic_star3{ display: none; width: 30px ; height: 30px; border: 2px solid #fec93b; margin: 22px auto 0px auto;}
            .mic_star4{display: none; margin: 15px 0px 0px 15px; float: left;}

            .mic_play{ display: none;  border: 2px solid #fec93b; width: 80px ; height: 80px; border: 2px solid #fec93b; border-radius: 60px;}
            .mic_star5{ text-align: center; margin: 12px 0px 0px 8px;}

            .count{ text-align: center; font-size: 30px; padding-top: 25%;}
            .vidio{ text-align: center; color: #999; padding: 20px 0px 20% 0px; font-size: 18px;}
            .vido_content{text-align: center; margin-bottom: 50%;}
            .mic_play_d{ float: left; margin-left: 24%;}
        </style>
        <script>
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: '{$AppID}', // 必填，公众号的唯一标识
                timestamp: '{$Think.session.timestamp}', // 必填，生成签名的时间戳
                nonceStr: '{$Think.session.nonceStr}', // 必填，生成签名的随机串
                signature: '{$signature}',// 必填，签名，见附录1
                jsApiList: ['startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            
        </script>
    </head>
    <body class="bgw">

     
        <section class="ui-container">
            <div class="ui-form ui-border-t">
              

                <notempty name='voice'>
                    <div class="ui-form-item ui-border-b" style=" height: 45px; margin-top: 10px;text-align: center;">
                        <audio controls="controls" >
                            <source src="{$voice}" type="audio/mp3"></source>
                        </audio>
                    </div>
                <div class="clean"></div>
                </notempty>
                
           
                  
            <div class='count'>00:00</div>
            <div class="vidio">点击录音</div>

            <div class="vido_content">
                <div class="mic_play_d">    
                   <a class="mic_play" href="javascript:play();"><div class="mic_star5"><img width="45" src="./Public/Kmic/pvidio.jpg"></div></a>
                </div>
                
                <div class='record mic_star' >
                   <div class="mic_star2" onclick="record()"></div>
                   <div class="mic_star3" onclick="stopRecord()"></div>
                   <div class="mic_star4"><img width="50" src="./Public/Kmic/revidio.jpg"></div>
                </div>
                <div class="clean"></div>
            </div>
                            
                        
                 
                    
 
                <div class="clean"></div>
                <div class="ui-form-item recordArea" style=" height: auto; " >
                    <div class="ui-btn-wrap">
                        <button class="ly_button saveRecord" >
                            保存录音
                        </button>
                    </div>
                </div>
                <div class="clean"></div>

                    <input type="hidden" name="language" value="" />
                    <input type="hidden" name="industry" value="" />
                    <input type="hidden" name="skill" value="" />
      
            </div>
            
        </section>
        <div class="ui-loading-block show">
            <div class="ui-loading-cnt">
                <i class="ui-loading-bright"></i>
                <p>正在加载中...</p>
            </div>
        </div>
        <script>
            
            $(".mic_star4").click(function(){
                s=0;
                record();
                $(".mic_star4").css('display','none');
                $(".mic_play").css("display","none");
                $(".mic_star").css("margin-left","40%");
            })
      
            
            $('.show').fadeOut();
            var picNum = 0;
            var videoNum = 0;
            
           
            //
            $(".saveRecord").click(function(){
                if (isRecord == 1 || isPlaying == 1) {
                    alert('请先停止录音或停止播放');
                    return;
                }
                
                if (recordArr.length > 0) {
                    i = 0;
                    uploadToWx(recordArr[0]);
                }else{
                    alert('没有录音');
                }
            });
            ////上传音频
            var i = 0;
            var link = '';
            function uploadToWx(e){
                wx.uploadVoice({
                    localId: e, // 需要上传的音频的本地ID，由stopRecord接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                        var serverId = res.serverId; // 返回音频的服务器端ID
                        link += "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id="+serverId+"[-]"
                        //
                        i++;
                        if (i<recordArr.length) {
                            uploadToWx(recordArr[i]);
                        }else{
                            var id = "{$Think.session.id}";
                            $.ajax({
                                cache: true,
                                type: "POST",
                                url:"?m=web&a=asyncAction",
                                data:{'link':link,'id':id},// 序列号formid
                                dataType: 'json',
                                error: function(request) {

                                },
                                success: function(data) {
                                    if (data.error == 0) {
                                        alert('提交成功！正在转码,5分钟后可正常播放。');
                                        window.location.href="?m=web&a=profiles&openid={$Think.get.openid}";
                                    }
//                                    console.log(data);
                                }
                            });
                        }
                        
                    }
                });
            }
            
            
            
            //
            var recordArr = new Array();
            var isRecord = 0;
            function record(){
                $(".vidio").text('录音中')
                $(".mic_star2").css("display","none");
                $(".mic_star3").css("display","block");
                if (isPlaying == 1) {
                    alert('请先暂停播放');
                    return;
                }
                if (isRecord == 0) {
                    isRecord = 1; 
                    currentPlaying = 1;
                    wx.startRecord();
                    $("#mic").attr('src','./Public/Images/mic.gif');
                    indate = 1;
                    counting = '';
                    s = 0;
                    m = 0;
                    recordArr = new Array();
                    showTime();
                }else{
                    if (s < 5) {
                        alert('录音不能少于5秒');
                        return;
                    }
                    stopRecord();
                }
                
            };
            
            
            function stopRecord(){
                $(".vidio").text('录音完成');
                       
                $(".mic_play").css("display","block");
                $(".mic_play").css("margin-left","12%");
                $(".mic_star").css("margin-left","10%");
                
                $(".mic_star4").css("display","block");
                $(".mic_star3").css("display","none");
                $(".mic_star2").css("display","none");
                isRecord = 0; 
                    wx.stopRecord({
                        success: function (res) {
                            var localId = res.localId;
                            recordArr.push(localId);
                            if (recordArr.length>0) {
//                                $('#play').css('display','block');
//                                $('.recordArea').css('display','block');
                            }
                        }
                    });
            }
            function stopAndContinue(){
                wx.stopRecord({
                    success: function (res) {
                        var localId = res.localId;
                        recordArr.push(localId);
                        wx.startRecord();
                    }
                });
            }
            
            wx.ready(function(){
                wx.onVoiceRecordEnd({
                    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                    complete: function (res) {
//                        alert('录音时间（' + res.localId + '）已超过一分钟');
                        var localId = res.localId; 
                        recordArr.push(localId);
                        setTimeout("wx.startRecord()",0);
                    }
                });
                
                wx.onVoicePlayEnd({
                    success: function (res) {
                        var localId = res.localId; // 返回音频的本地ID
                        if (recordArr.length > currentPlaying) {
//                            alert(recordArr.length+'here'+currentPlaying);
                            currentPlaying ++;
                            wx.playVoice({
                                localId: recordArr[currentPlaying] // 需要播放的音频的本地ID，由stopRecord接口获得
                            });
                        }else{
//                            alert(recordArr.length+'done'+currentPlaying);
                            isPlaying = 0;
                            $(".play").attr('src','./Public/Images/play.png');
                        }
                        
                    }
                });
            })
            
            
            //////计时
            var indate = 1;
            var counting = '';
            var s = 0;
            var m = 0;
            function showTime(){
                if (isRecord == 1) {
                    if (s >= 59) {
                        stopAndContinue();
                        s = 0;
                        if (m >=15) {
                            alert('最长录音时间为15分钟');
                            stopRecord();
                            return;
                        }else{
                            m++;
                        }
                        
                    }else{
                        s++;
                    }
//                    s = parseInt(s);
//                    s = pad(s,2);
                    counting = pad(m,2) + ":" + pad(s,2)
                    $('.count').html(counting);
                    indate++;
                    setTimeout("showTime()",1000);
                }
                
            }
            
            function pad(num, n) {  
                return (Array(n).join(0) + num).slice(-n);
            }  

            var currentPlaying = 1;
            ///play
            var isPlaying = 0;
            function play(){
                if (isRecord == 1) {
                    alert('请先暂停录音');
                    return;
                }
                if (recordArr.length == 0) {
                    alert('没有录音');
                    return;
                }
                if (isPlaying == 0) {
                    isPlaying = 1;
                    currentPlaying = 1;
                    $('.play').attr('src','./Public/Images/stop.png');
                    wx.playVoice({
                        localId: recordArr[0] // 需要播放的音频的本地ID，由stopRecord接口获得
                    });
                }else if (isPlaying == 1) {
                    alert(recordArr[currentPlaying-1]);
                    isPlaying = 0;
                    wx.stopVoice({
                        localId: recordArr[currentPlaying-1] // 需要停止的音频的本地ID，由stopRecord接口获得
                    });
                    $('.play').attr('src','./Public/Images/play.png');
                }
                
            }
            
         if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            //alert(navigator.userAgent);  
        } else if (/(Android)/i.test(navigator.userAgent)) {
            $('.note').html('安卓版本试听最长1分钟，保存录音后可完整播放。');
        } else {
//                window.location.href ="pc.html";
        };
            
        </script>
    </body>
</html>